<template>
<div>
  <div id="errorMessage">{{errorMessage}}</div>
  <div ref="scroll" @scroll="scroll($event)" id="messageBox">


      <div class="message" v-for="(item,index) in messageList" :key="index">


        <el-row :gutter="0" v-if="item.name===nickname">
          <el-col :span="2"><el-avatar>{{item.name}} </el-avatar></el-col>
          <el-col class="messageIn"  :span="19" > {{item.message}} </el-col>
        </el-row>

        <el-row :gutter="0" v-else>

          <el-col class="messageIn" :span="19" :offset="3" > {{item.message}} </el-col>
          <el-col :offset="0" :span="2"><el-avatar>{{item.name}} </el-avatar></el-col>
        </el-row>

      </div>



  </div>


<div id="footer">
  <div v-if="isValidatedNickName">

    message: <el-input v-model="message" style="width: 500px"></el-input>
    <el-button @click="fire" >send</el-button>
  </div>
  <div v-else>
    nickname: <el-input v-model="nickname" style="width: 500px"></el-input>
    <el-button @click="confirmNickName" >confirm</el-button>
  </div>
</div>

</div>
</template>

<script>
import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';
export default {
  name: "AnotherOne",
  data(){
    return{
        test:'t',
        client:null,
        message:"",
        nickname:"",
        isValidatedNickName:false,
        messageList:[],

    }
  },
  computed:{
    errorMessage(){
      if (this.isValidatedNickName){
        return "";
      }else {
        return "please enter the nickName!!";
      }
    }
  },
  methods:{
    confirmNickName(){
      this.isValidatedNickName=true;
    },
    fire(){
      this.send();
    },

    connection(){
      let socket = new SockJS("http://172.28.60.187:9999/socket");

      this.client=Stomp.over(socket);

       this.client.connect({},(frames)=>{
        this.client.subscribe('/topic/getResponse',(param)=>{
          console.log(param)
          this.messageList.push(JSON.parse(param.body));



        });
      });
    },
    disconnect(){

      if (this.client){

        this.client.disconnect();
      }

    },
    send(){
      if (!this.nickname){

        this.isValidatedNickName=false;

        this.$message("nickname is not validate!");

        return false;
      }
      let obj={message:this.message,name:this.nickname}

      this.client.send("/subscribe",{},JSON.stringify(obj));
    },
    scroll(e){
      console.log('top'+e.target.scrollTop,'height'+e.target.scrollHeight)
    }
  },
  created() {
    this.connection();
  },
  updated() {
    let scroll=document.getElementById("messageBox");

    scroll.scrollTop=scroll.scrollHeight;
  }
}
</script>

<style scoped>
#messageBox{
  height: 300px;
  width: 600px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin: 0 auto;
  margin-bottom: 20px;
  overflow: auto;
  padding: 15px;
}
.message{
 line-height: 100%;
  margin: 2px 0;
  padding: 8px 0;
  text-align: center;
}
.messageIn{
  border-radius: 40px;
  background-color: #E4E7ED;
  line-height: 40px;
}
#errorMessage{
  margin: 10px 0;
  color: #F56C6C;
  font-size: 15px;
  font-weight: 600;
}
</style>
